// src/components/QuestionEditor/LocationInput.jsx
import React from 'react';
import { Button, Alert, message } from 'antd'; // 添加message导入

const LocationInput = ({ question, updateQuestion }) => {
  const handleGetLocation = () => {
    if (!navigator.geolocation) {
      message.error('浏览器不支持地理定位');
      return;
    }

    navigator.geolocation.getCurrentPosition(
      //成功时的回调函数
      position => {
        updateQuestion({
          ...question,
          location: {
            lat: position.coords.latitude,
            lng: position.coords.longitude,
            accuracy: position.coords.accuracy
          }
        });
      },
      error => message.error(`定位失败: ${error.message}`)
    );
  };

  return (
    <div style={{ marginTop: 16 }}>
      <Button onClick={handleGetLocation}>获取位置信息</Button>
      {/*如果用户定位成功则弹出提示框进行提示*/}
      {question.location && (
        <Alert
          style={{ marginTop: 8 }}
          message={`定位成功 (经度: ${question.location.lng.toFixed(4)}, 纬度: ${question.location.lat.toFixed(4)})`}
          type="success"
          showIcon
        />
      )}
    </div>
  );
};

export default LocationInput;